<template>
  <div class="author-info border-bottom border-top d-flex justify-content-around align-items-center w-100 py-3 mb-3" v-if="author">
    <div class="author-name-avatar d-flex align-items-center">
      <img :src="avatarUrl" alt="avatar" class="rounded-circle" />
      <div class="px-2">{{ author.nickName }}</div>
    </div>
    <p class="w-100 mb-0 text-end fst-italic">发表于 :{{date}}</p>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { UserProps } from '../store'
import { defaultAvatar } from '../hooks/defaultAvatar'

export default defineComponent({
  props: {
    author: {
      type: Object as PropType<UserProps>
    },
    date: {
      type: String
    }
  },
  setup (props) {
    const avatarUrl = computed(() => {
      if (props.author) {
        return defaultAvatar(props.author.avatar)
      }
      return undefined
    })
    return {
      avatarUrl
    }
  }
})
</script>
<style scoped>
.author-name-avatar img {
  border: 1px solid rgb(218, 218, 218);
  padding: 3px;
  width: 50px;
  height: 50px;
}
</style>
